<template>
    <div>
        <ToolBar>
            <div>
                <el-button type="primary" size="small" @click="showEditDialog = true">添加博客</el-button>
            </div>
            <div>
                <el-input placeholder="请输入博客标题" size="small" style="width: 140px" v-model="searchParams.title" clearable>
                </el-input>
                <!-- <el-select v-model="searchParams.type" clearable style="width: 140px" placeholder="请选择博客内容"
                    size="small">
                    <el-option v-for="item in BlogData" :key="item.id" :label="item.typename" :value="item.id">
                    </el-option>
                </el-select> -->
                <el-button type="success" size="small" @click="refresh()">查询</el-button>
                <el-button type="warning" size="small" @click="clearSearchParams()">重置</el-button>
            </div>
        </ToolBar>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="blogId" label="博客ID"></el-table-column>
            <el-table-column prop="title" label="博客标题"></el-table-column>
            <el-table-column prop="content1" label="博客第一段落"></el-table-column>
            <el-table-column prop="content2" label="博客第二段落"></el-table-column>
            <el-table-column prop="content3" label="博客第三段落"></el-table-column>
            <el-table-column label="展示图片">
                <template slot-scope="s">
                <el-image style="width: 100px; height: 100px" :src="imageApi + s.row.demoPicture"></el-image>
                </template>
            </el-table-column>
            
            <el-table-column label="侧边图片">
                <template slot-scope="s">
                <el-image style="width: 100px; height: 100px" :src="imageApi + s.row.flankPicture"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="issueTime" label="发布时间"></el-table-column>
            <el-table-column prop="hits" label="点击量"></el-table-column>
            
            
            <el-table-column fixed="right" label="操作" width="240">
                <div slot-scope="s">
                    <!-- <el-tooltip :content="stateValue" placement="top">
            <el-switch
              v-model="stateValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="2"
              inactive-value="1"
              @change="updateState(s.row.id)"
            ></el-switch>
          </el-tooltip>-->
                    <el-button type="primary" size="small" @click="editItem(s.row.blogId)">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteFunction(s.row.blogId)">删除</el-button>

                </div>
            </el-table-column>
        </el-table>
        <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="total"
            @current-change="changePage"></el-pagination>
        <!--    <Pagination-->
        <!--      :params="searchParams"-->
        <!--      :requestFunc="requestFunc"-->
        <!--      ref="pagination"-->
        <!--      @returnData="returnData"-->
        <!--    />-->
        <Edit :showEditDialog="showEditDialog" @close="showEditDialog = false" @success="refresh()" />
    </div>
</template>

<script>
import { getBlog,getBlogById } from "@/api/blogManagement/list";
import { resetObject } from "@/utils/common";
import { DeleteBlog } from "@/api/blogManagement/list";
import { serverApiUrl } from "@/config/apiUrl";
import Edit from "./Edit.vue";
export default {
    data() {
        return {

            pageSize: 5, //每页显示5条
            total: 0, //总条数
            pageNo: 1, //默认当前页码第1页
            searchParams: {
                title: "",
            },
            showEditDialog: false,
            tableData: [],
            //BlogData: [],
            // id: null,
            // stateValue: 1
            serverImageUrl: serverApiUrl, // 服务器图片地址，可从后端获取
            imageApi: serverApiUrl,
        };
    },
    
    created() {
        this.initData(); //页面加载就初始化用户数据，默认选第一页的数据
    },
    methods: {
        
        changePage(val) {
            //val:改变页码当前的页码
            this.pageNo = val;
            this.initData(); //根据新的页码选取分页数据
        },
        initData() {
            getBlog({
        //获取博客列表
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            title: this.searchParams.title,
        
      })
        .then(r => {
          this.tableData = r.records;
          console.log(this.tableData);
          this.total = r.total;
        })
        .catch(() => { });

        },

        editItem(blogId) {
            this.blogId = blogId;
            this.showEditDialog = true;
        },

        refresh() {
            this.initData();
        },
        returnData(pageList) {
            this.tableData = pageList.list;
        },
        clearSearchParams() {
            resetObject(this.searchParams);
            this.refresh();
        },
        deleteFunction(blogId) {
            {
                //删除
                this.$confirm("确定删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        console.log(blogId);
                        DeleteBlog({ "blogId": blogId });
                        this.initData();
                    })
                    .catch(() => { });
            }
        },
        // updateStateApi(blogId, newstate) {
        //     console.log(blogId, newstate);

            // row.d = 0;
            // updateStatus({ id: row.id})
            //   .then(r => {
            //     this.$message({
            //       type: "success",
            //       message: "操作成功!"
            //     });
            //     this.refresh();
            //   })
            //   .catch(() => {});
        // }
    },

    components: { Edit }
};
</script>
